<!DOCTYPE html>
<!--<html class="no-ie" style="overflow:hidden;">-->
<html >
<head>
    <meta charset="UTF-8">
    <title>安全用电数据展示平台</title>
    <link rel="stylesheet" href="css/style.css"/>
    <link href="css/style.css" type="text/css" rel="stylesheet"/>
    <link href="css/page.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script src="js/mqtt.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/layer/layer.js"></script>
    <script type="text/javascript" src="js/vue.min.js"></script>

</head>
<body>

<div class="dialog"></div>

<!--<style type="text/css">-->

<!--    　　html {-->
<!--        　　overflow-x: hidden;-->
<!--        　　overflow-y: hidden;}-->

<!--    body {-->
<!--        　　overflow-x: hidden;-->
<!--        　　overflow-y: hidden;}-->

<!--    　　</style>-->
<header>
   安全用电设备平台数据统计
    <span id=localtime style=" font-size:14px; position: absolute; right: 30px; top:-20px; "></span>
</header>


<div id="content">
    <div class="content_left">
        <div class="dtuplc">
            <div class="dtu">
                <div id="container" style="height: 100%;"></div>
            </div>
            <div class="plc">
                <div id="container1" style="height: 100%"></div>
            </div>
        </div>
        <!--
            DTU和PLC完
        -->
        <div class="online">
            <div class="title"><img src="images/icon01.png"/> 设备在线情况</div>
           <div class="online_con" id="container2">

            </div>
        </div>
        <div class="industry">
            <div class="title"><img src="images/icon02.png"/> 设备应用类型</div>
            <div class="industry_con" id="container3"></div>
        </div>
    </div>

    <div class="content_center">
        <div class="center_top">
            <div class="title"><img src="images/icon03.png"/> 安全用电设备分布</div>
            <!--					<div class="Sellerber_content" id="contents">-->
            <!--						<div id="l-map" style="display: none"></div>-->
            <!--					</div>-->
            <!--					<div class="center_top_con" id="l-map" ></div>-->
            <!--					<div class="center_top_con" id="distribution_map">-->
            <div class="center_top_con" style="padding-top:1%;padding-left:3%">
                <iframe id="iframeMap"
                        src="./map_page.html"
                        width="99%" height="100%" frameborder=”no” border=”0″ marginwidth=”0″ marginheight=”0″
                        scrolling=”no” allowtransparency=”yes”></iframe>

            </div>

        </div>
        <div class="center_bot" id="deviceTable">

            <table class="panel-table" bordercolor="#0d48e0" border="1" id="deviceList">
                <thead bgcolor="#0e4ae0" align="center">
                <tr height="40">
                    <th colspan="10"><img src="images/icon04.png"/> 监控设备列表</th>
                </tr>
                </thead>
                <tbody>
                <tr class="aaa" align="center">
                    <td v-for="item in factoryHeader" style="color: #00fcff; font-size: 18px; padding: 5px 0;">
                        {{ item.categories }}
                    </td>
                </tr>
<!--                						<h>{{ factory }}</h>-->
                <tr v-for="y in factory" class="aaa" style="font-size: 16px;" align="center">
                    <td>{{ y.deviceSn }}</td>
                    <td>{{ y.isOnline == 0 ? "离线" : "在线" }}</td>

                    <td>{{  y.voltage>=0?y.voltage:(isNaN(y.avolage)?'/':y.avolage/10 ) }}</td>
                    <td>{{ isNaN(y.bvolage)||(y.bvolage==null)||(y.bvolage==-1)?'/':y.bvolage/10 }}</td>
                    <td>{{ isNaN(y.cvolage)||(y.cvolage==null)||(y.cvolage==-1)?'/':y.cvolage/10 }}</td>

                    <td>{{ y.current>=0?y.current:(isNaN(y.acurrent)?'/':y.acurrent/10 )}}</td>
                    <td>{{ isNaN(y.bcurrent)||(y.bcurrent==null)||(y.bcurrent==-1)?'/':y.bcurrent/10 }}</td>
                    <td>{{ isNaN(y.ccurrent)||(y.ccurrent==null)||(y.ccurrent==-1)?'/':y.ccurrent/10 }}</td>

                    <td>{{ isNaN(y.louCurrent)||(y.louCurrent==null)?'/':y.louCurrent }}</td>

                    <td width="30%">
                        <button class="b1 click_pop" v-on:click="devAlarmMsgClick(y.deviceSn,y.deviceType)">报警记录</button>
                        <button class="b2 click_pop2" v-on:click="viewDevData(y)">设备数据</button>
                        <button class="b3 click_pop3" v-on:click="viewLocation(y)">查看位置</button>
                    </td>
                </tr>
                </tbody>

            </table>
            <!--分页-->
            <div class="page-bar">
                <ul>
                    <li  :class="{'banclick':page.pageNum == 1}" v-on:click="btnClick(-1)">上一页</li>
                    <li v-for="item in page.pageCount" v-bind:class="{ 'active': page.pageNum == item}"
                        v-on:click="pageClick(item)">
                        {{ item }}
                    </li>
                    <li :class="{'banclick':page.pageNum >=page.pageCount}" v-on:click="btnClick(1)">下一页</li>
                    <li><a>第<i>{{page.pageNum}}</i>页</a></li>
                    <li><a>共<i>{{page.pageCount}}</i>页</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="content_right">
        <div class="report">
            <div class="report1" v-on:click="showPop4('alarm',0)">
                <p>告警信息</p>
                <small>{{alarm.alarm}}条</small>
            </div>
            <div class="report2" v-on:click="showPop4('fault',2)">
                <p>故障信息</p>
                <small>{{alarm.fault}} 条</small>
            </div>
        </div>
        <div class="news_report">
            <div class="title"><img src="images/icon05.png"/> 报警记录</div>
            <div class="news_list">
                <ul id="alarmMsgList">
                    							<li v-for="item in almMsg.slice(0,4)" class="li02">
                    							    {{ item.msg }}
                    							</li>

                </ul>
            </div>
        </div>
        <div class="data_box">
            <div class="title"><img src="images/icon06.png"/> 数据记录</div>
            <div class="data_con" id="container4">
            </div>
        </div>
    </div>
</div>


<!--		&lt;!&ndash;遮罩层&ndash;&gt;-->
<div class="bgPop"></div>
<!--弹出框-->
<div class="pop">
    <div class="pop-top">
        报警记录
        <span class="pop-close">Ｘ</span>
    </div>
    <div class="pop-content" id="devAlarm">
        <table class="panel-table" bordercolor="#deefff" border="1">
            <thead bgcolor="#971212" align="center">
            <tr height="38">
                <th>设备MAC</th>
                <th>过压报警</th>
                <th>欠压报警</th>
                <th>过流报警</th>
                <th>漏电流报警</th>
                <th>报警时间</th>
            </tr>
            </thead>
            <tbody id="alarmData">

            <tr class="aaa" style="font-size: 16px;" align="center">

            </tr>

            </tbody>
        </table>
    </div>
    <div class="pop-foot">
        <input type="button" value="确定" class="pop-cancel pop-close">
    </div>

</div>

<div class="bgPop3"></div>
<div class="pop3">
    <div class="pop-top">
        报警记录
        <span class="pop-close">Ｘ</span>
    </div>
    <div class="pop-content" id="devAlarmYk">



        <table class="panel-table" bordercolor="#deefff" border="1">
            <thead bgcolor="#971212" align="center">
            <tr height="38">
                <th>报警时间</th>
                <th>过压状态</th>
                <th>过流状态</th>
                <th>欠压状态</th>
                <th>漏电流状态</th>
				<th>缺相</th>
				<th>过载预报</th>
				<th>过载延时</th>
				<th>短路延时</th>
				<th>中心线</th>
				<th>接地</th>
				<th>电流不平衡</th>
            </tr>
            </thead>
            <tbody id="alarmDataYk">

            <tr class="aaa" style="font-size: 16px;color:white;" align="center"></tr>

            </tbody>
        </table>
    </div>
    <div class="pop-foot">
        <input type="button" value="确定" class="pop-cancel pop-close">
    </div>

</div>


<div class="bgPop4"></div>
<style>
    .pop4 table tbody {
        display:block;
        height:420px;
        overflow-y:scroll;
        overflow-x: hidden;
    }

    .pop4 table thead, .pop4 tbody tr {
        display:table;
        width:100%;
        table-layout:fixed;
    }

    .pop4 table thead {
        width: calc( 100% - 25px )
    }
</style>
<div class="pop4">
    <div class="pop-top">
        警告信息明细表
        <span class="pop-close">Ｘ</span>
    </div>
    <div class="pop-content">
        <table class="panel-table" bordercolor="#deefff" border="1">
            <thead bgcolor="#971212" align="center">
                <tr height="38">
                    <th>设备号</th>
                    <th>报警时间</th>
                    <th>报警事项</th>
                    <th>地址</th>
                    <th>清除报警时间</th>
                    <th>当前报警状态</th>
                </tr>
            </thead>
            <tbody  id="bgPop4Data">

            <tr class="aaa" style="font-size: 16px;color:white;" align="center"></tr>

            </tbody>
        </table>

    </div>
    <div class="pop-foot">
        <input type="button" value="确定" class="pop-cancel pop-close">
    </div>

</div>

<!--遮罩层-->
<div class="bgPop2"></div>
<!--弹出框-->
<div class="pop2">
    <div class="pop-top">
        历史记录
        <span class="pop-close">Ｘ</span>
    </div>
    <div class="pop-content">
        <table class="panel-table" bordercolor="#deefff" border="1">

            <tbody id="devInfoShow">

            </tbody>
        </table>
    </div>
    <div class="pop-foot">
        <input type="button" value="确定" class="pop-cancel pop-close">
    </div>


</div>





</body>

<script>
console.log(localStorage.getItem('token'))
console.log(localStorage.getItem('userid'))
if (!localStorage.getItem('token') || !localStorage.getItem('userid')|| !localStorage.getItem('displayFlag')) {
		//console.log("init");
			window.location.href = 'login.html'
		}

    function service(data) {
        console.log(11111111111111111)

        // document.getElementById("iframeMap").contentWindow.centerMap(data);
    }

    function showDeviceList(data) {

        // vm.$set(vm.$data.factory,0,data);


    }

    function alarmMsgClick(data) {
        centerMap(data)

    }

    let indexMessage = 0

    function login(){
        location.href='login.html';
    }

    function addAlarmMsg(data) {
        var ul = document.getElementById("alarmMsgList");
        var li = document.createElement("li");
        let alarmData = data;
        console.log(alarmData);devAlarmYk
        indexMessage++
        let classDev = 'devp_' + indexMessage
        if (indexMessage == 6) {
            indexMessage--
            ul.lastChild.remove()
        }

        var alarmS = alarmData.warmTime + '&nbsp;&nbsp;' + alarmData.devicesn + '<br/>';
        li.innerHTML = '<li style="width:90% ; display:inline;line-height:20px;" onclick="alarmMsgClick(alarmData)" >'
            + '<a style="font-size:8px ">' + alarmS + '</a>' +
            '<a style="color: red">' + alarmData.errMsg + '</a>'
            + '</li>';

        // ul.appendChild(li);
        ul.prepend(li);

        li.addEventListener(
            "click",
            function () {
                console.log(JSON.stringify(alarmData.devInfo))
                document.getElementById("iframeMap").contentWindow.centerMap(alarmData.devInfo);
            },
            false
        );


    }
</script>


<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/china.js"></script>
<!--		<script type="text/javascript" src="js/vue.min.js"></script>-->
<!--		<script type="text/javascript" src="js/map.js"></script>-->
<script type="text/javascript" src="js/times.js"></script>
<!--<script type="text/javascript" src="js/DTU.js"></script>-->
<!--<script type="text/javascript" src="js/PLC.js"></script>-->
<!--<script type="text/javascript" src="js/online.js"></script>-->
<!--<script type="text/javascript" src="js/industry.js"></script>-->
<!--<script type="text/javascript" src="js/data.js"></script>-->
<script type="text/javascript" src="js/index.js"></script>
<!--	    <script type="text/javascript" src="js/devAlarmList.js"></script>-->
</html>
